<template>
    <div>
        <!--面包屑导航-->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/nursinghome/nursemain' }" class="breadCrumb">首页
            </el-breadcrumb-item>
            <el-breadcrumb-item>活动登记审批</el-breadcrumb-item>
            <el-breadcrumb-item>探视登记审批</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="bed-management-main">
            <div class="operater-bar">
                <!--输入和选择区域-->
                <div class="input-select-field">
                    <div>
                        <el-text class="mx-1">老人姓名：</el-text>
                        <el-input placeholder="请输入姓名" />
                    </div>
                    <div>
                        <el-text class="mx-1">提交时间：</el-text>
                        <el-date-picker v-model="value1" type="date" placeholder="选择一个时间" />
                    </div>
                    <div>
                        <el-text class="mx-1">审批时间：</el-text>
                        <el-date-picker v-model="value2" type="date" placeholder="选择一个时间" />
                    </div>
                    <div>
                        <el-text class="mx-1">审批状态：</el-text>
                        <el-select placeholder="请选择审批状态" size="normal">
                            <el-option v-for="item in checkInStatusOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </div>
                <!--按钮区域-->
                <div class="btn-field">
                    <el-button type="primary">搜索</el-button>
                </div>

            </div>
            <div class="table-field">
                <el-table :data="tableData" border stripe style="width: 100%">
                    <el-table-column prop="ID" label="ID" />
                    <el-table-column prop="elderName" label="老人姓名" />
                    <el-table-column prop="status" label="审批状态" />
                    <el-table-column prop="uploadTime" label="提交时间" />
                    <el-table-column prop="updateTime" label="审批时间" />
                    <el-table-column prop="operator" label="操作">
                        <template #default>
                            <el-button type="primary" size="small">
                                审批
                            </el-button>
                            <el-button type="primary" size="small" color="red">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ArrowRight, Plus, CirclePlusFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')

const tableData = [
    {
        ID: 1,
        status: '已通过',
        elderName: '张三',
        uploadTime: '6/7/12:23',
        updateTime: '6/8/12:23',
        operator: ''
    },
    {
        ID: 3,
        status: '未审批',
        elderName: '王五',
        uploadTime: '6/7/12:23',
        updateTime: '',
        operator: ''
    },
    {
        ID: 4,
        status: '未通过',
        elderName: '李四',
        uploadTime: '6/7/12:23',
        updateTime: '6/8/12:23',
        operator: ''
    }
]

const checkInStatusOptions = [
    {
        value: 1,
        label: '未通过'
    },
    {
        value: 1,
        label: '已通过'
    },
    {
        value: 0,
        label: '未审批'
    }
]

</script>

<style lang="less" scoped>
.el-breadcrumb {
    margin-bottom: 15px;
}

.bed-management-main {
    width: 1175px;
    height: 575px;
}

.operater-bar {
    width: 100%;
    flex-direction: row;
    display: flex;
}

.input-select-field {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 4000px;
}

.table-field {
    width: 100%;
    margin-top: 15px;
}

.el-input {
    width: 150px;
}

.el-select {
    width: 150px;
}

.btn-field {
    width: 350px;
    display: flex;
    justify-content: flex-end;

    >.el-button {
        margin-left: 10px;
        margin-right: 10px;
    }
}

.demo-datetime-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
}

.demo-datetime-picker .block {
    padding: 30px 0;
    text-align: center;
}

.line {
    width: 1px;
    background-color: var(--el-border-color);
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>